import { useEffect, useState } from 'react'
import { App, Form, Table, Button, Space, Tag, Input } from "antd"

import "./index.css"
import { UserAddOutlined } from "@ant-design/icons"

import * as Api from '@/api/register'

const columns = [
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "密码",
    dataIndex: "password",
    key: "password",
  },
  {
    title: "邀请码",
    dataIndex: "invite_code",
    key: "invite_code",
  },
  {
    title: "提交时间",
    dataIndex: "create_time",
    key: "create_time",
  },
]

const PermissionAdmin = () => {
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({})

  const [page, setPage] = useState(1)
  const [limit, setLimit] = useState(15)
  const [data, setData] = useState([])
  const [count, setCount] = useState(0)
  const { message } = App.useApp()
  const [form] = Form.useForm()

  const getList = async () => {
    setLoading(true)

    try {
      const { data } = await Api.list({page: page, limit: limit}, { form: formData })

      setData(data.data)
      setCount(data.total)
    } catch (err) {
      message.error(err)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    getList()
  }, [formData, page, limit])

  const handleSearch = (values) => {
    setFormData(values)
  }

  const paginationChange = (changePage, changePageSize) => {
    if (changePage != page) setPage(changePage)
    if (changePageSize != limit) setLimit(changePageSize)
  }

  const copyPage = () => {
    let content = ''

    data.forEach(item => {
      content += `${ item.username }\t${ item.password }\n`
    })

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(content).then(() => {
        message.success('复制成功')
      }).catch(err => {
        message.error('复制失败')
      })
    } else {
      const textArea = document.createElement('textarea')
      textArea.value = content
      textArea.style.position = "fixed"
      textArea.style.left = "-9999px"
      document.body.appendChild(textArea)

      textArea.focus()
      textArea.select()

      const successful = document.execCommand('copy')

      if (successful) {
        message.success('复制成功')
      } else {
        message.error('复制失败')
      }
    }
  }

  return (
    <div>
      <div style={{ padding: '25px 0' }}>
        <Form form={ form } layout='inline' onFinish={ handleSearch }>
          <Form.Item name="invite_code" label="邀请码">
            <Input name="invite_code" placeholder="请输入邀请码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">查询</Button>
          </Form.Item>
        </Form>
      </div>
      <p>提交人数: { count }</p>
      <p><Button onClick={ copyPage }>一键复制</Button></p>
      <div>
        <Table
          size="small"
          loading={loading}
          columns={columns}
          dataSource={data}
          rowKey={"id"}
          pagination={{
            current: page,
            defaultPageSize: limit,
            total: count,
            onChange: paginationChange,
          }}
        />
      </div>
    </div>
  )
}

export default PermissionAdmin
